<style lang="less">
    @import "MyDepartment.less";
</style>
<template>
    <div class="search">
        <Card>
            <Row type="flex" justify="start" class="code-row-bg">
                <Col span="6">
                    <Input v-model="searchKey" suffix="ios-search" @on-change="search" placeholder="输入部门名搜索"/>
                    <div class="tree-bar">
                        <Tree ref="tree" :data="data" :load-data="loadData" @on-select-change="selectTree"></Tree>
                    </div>
                    <Spin size="large" fix v-if="loading"></Spin>
                </Col>
                <Col span="16" style="margin-left: 10px">
                    <Card title="基本数据" dis-hover bordered="false">
                        <Row type="flex" justify="center" class="code-row-bg" :gutter="24">
                            <Col span="12">
                                <CellGroup>
                                    <Cell title="机构名称" :extra="editTitle"/>
                                    <Cell title="机构类型" extra="代理商"/>
                                    <Cell title="负责人" extra="钟经理" to="xxx"/>
                                    <Cell title="服务状态">
                                        <p slot="extra" style="color: #19be6b">使用中</p>
                                    </Cell>

                                    <Cell title="服务开始时间" extra="2018-09-27"/>
                                    <Cell title="服务结束时间" extra="2019-09-27"/>
                                    <Cell title="禁用此账号">
                                        <i-switch v-model="switchValue" slot="extra"/>
                                    </Cell>
                                </CellGroup>

                            </Col>
                            <Col span="12">
                                <CellGroup>
                                    <Cell title="全部终端数量" extra="66"/>
                                    <Cell title="电子价签终端数量" extra="66"/>
                                    <Cell title="精品柜终端数量" extra="50"/>
                                    <Cell title="Take系统终端数量" extra="27"/>
                                    <Divider/>
                                    <Cell title="全部商品数量" extra="66"/>
                                    <Cell title="电子价签商品数量" extra="66"/>
                                    <Cell title="精品柜商品数量" extra="50"/>
                                    <Cell title="Take系统商品数量" extra="27"/>
                                </CellGroup>
                            </Col>
                        </Row>
                    </Card>
                    <Card title="最近激活的终端列表" dis-hover bordered="false" style="margin-top: 10px">
                        <Table :loading="tableLoading" border :columns="columns" :data="tableData" ref="table"/>
                    </Card>
                </Col>
            </Row>
        </Card>

    </div>
</template>

<script>
    import {
        initDepartment,
        loadDepartment,
        addDepartment,
        editDepartment,
        deleteDepartment,
        searchDepartment
    } from "@/api/index";

    export default {
        name: "department-manage",
        data() {
            return {
                loading: true,
                selectList: [],
                selectCount: 0,
                showParent: false,
                switchValue: false,
                editTitle: "",
                searchKey: "",
                form: {
                    id: "",
                    parentId: "",
                    parentTitle: "",
                    sortOrder: null,
                    status: 0,
                    url: ""
                },
                data: [],
                tableData: [],
                tableLoading: true,
                columns: [
                    // 表头
                    {
                        title: "序号",
                        type: "index",
                        width: 70,
                        align: "center"
                    },
                    {
                        title: "机构名称",
                        key: "name",
                    },
                    {
                        title: "所在地区",
                        key: "area",
                        width: 120,
                        align: "center"
                    },
                    {
                        title: "激活时间",
                        key: "createTime",
                        width: 120,
                        align: "center"
                    }
                ],
            };
        },
        methods: {
            init() {
                this.getParentList();
                this.getDataList()
            },
            getParentList() {
                this.loading = true;
                initDepartment().then(res => {
                    this.loading = false;
                    if (res.success === true) {
                        res.result.forEach(function (e) {
                            if (e.isParent) {
                                e.loading = false;
                                e.children = [];
                            }
                        });
                        this.data = res.result;
                    }
                });
            },
            loadData(item, callback) {
                loadDepartment(item.id).then(res => {
                    if (res.success === true) {
                        res.result.forEach(function (e) {
                            if (e.isParent) {
                                e.loading = false;
                                e.children = [];
                            }
                        });
                        callback(res.result);
                    }
                });
            },
            search() {
                if (this.searchKey) {
                    this.loading = true;
                    searchDepartment({title: this.searchKey}).then(res => {
                        this.loading = false;
                        if (res.success) {
                            this.data = res.result;
                        }
                    });
                } else {
                    this.getParentList();
                }
            },
            selectTree(v) {
                if (v.length > 0) {
                    // 转换null为""
                    for (let attr in v[0]) {
                        if (v[0][attr] === null) {
                            v[0][attr] = "";
                        }
                    }
                    let str = JSON.stringify(v[0]);
                    let data = JSON.parse(str);
                    this.form = data;
                    this.editTitle = data.title;
                }
            },
            handleReset() {
                this.$refs.form.resetFields();
                this.form.status = 0;
            },
            changeSelect(v) {
                this.selectCount = v.length;
                this.selectList = v;
            },
            getDataList() {
                this.tableLoading = true;
                let params = {
                    pageNumber: this.pageNumber,
                    pageSize: this.pageSize,
                    sort: this.sortColumn,
                    order: this.sortType
                };
                this.tableData = [
                    {
                        name: "苏宁易购番禺营业厅",
                        area: "广东",
                        createTime: "2018-10-12",
                    },
                    {
                        name: "天河营业厅广告机",
                        area: "广东",
                        createTime: "2018-10-12",
                    },
                    {
                        name: "测试机",
                        area: "广东",
                        createTime: "2018-10-12",
                    },
                    {
                        name: "百花厅6号厅",
                        area: "广东",
                        createTime: "2018-10-12",
                    }, {
                        name: "金色边广告机1",
                        area: "广东",
                        createTime: "2018-10-12",
                    }, {
                        name: "金色边广告机2",
                        area: "广东",
                        createTime: "2018-10-12",
                    }, {
                        name: "金色边广告机3",
                        area: "广东",
                        createTime: "2018-10-12",
                    }, {
                        name: "金色边广告机4",
                        area: "广东",
                        createTime: "2018-10-12",
                    }, {
                        name: "金色边广告机5",
                        area: "广东",
                        createTime: "2018-10-12",
                    },

                ];
                this.tableLoading = false;
            },
        },
        mounted() {
            this.init();
        }
    };
</script>
